<template>
  <div class="need-item-container">
    <div class="tree-content">
      <el-card>
        <div slot="header" class="card-header">
          <span>位置导航</span>
          <div class="card-header-btn">
            <el-dropdown size="mini" @command="handleCommand">
              <el-button size="mini" type="primary">
                添加位置
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown" style="width: 98px;">
                <el-dropdown-item
                  v-for="(item, i) in typeList"
                  :key="i"
                  :command="item.command"
                >{{item.name}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div>
          <el-input size="mini" v-model="pageName" @change="handleSearchTree" placeholder="请输入位置名称">
            <el-button
              size="mini"
              slot="suffix"
              @click="handleSearchTree"
              icon="el-icon-search"
              type="text"
            ></el-button>
          </el-input>
        </div>
        <tree-menu
          class="tree-menu"
          :treeProps="treeProps"
          @selectedMenu="handleSelectedMenu"
          @nodeClick="handleNodeClick"
        ></tree-menu>
      </el-card>
    </div>
    <div class="mess-content">
      <bury-info :infoProps="buryInfoProps" @savePage="handleSavePage"></bury-info>
      <el-card class="list-card" v-if="buryInfoProps.operateType === 'edit'">
        <el-input
          size="mini"
          class="search-input"
          @change="handleSearchEvent"
          placeholder="请输入埋点名称"
          v-model="trackName"
        >
          <el-button
            size="mini"
            slot="suffix"
            @click="handleSearchEvent"
            icon="el-icon-search"
            type="text"
          ></el-button>
        </el-input>
        <el-tabs v-model="tabActive" @tab-click="handleTabClick">
          <el-tab-pane :label="tabName.first" name="first" class="page-content">
            <event-table :infoProps="buryInfoProps" :treeProps="treeProps" :searchArgs="tableSearchArgs"></event-table>
          </el-tab-pane>
          <el-tab-pane :label="tabName.second" name="second" class="un-page-content">
            <event-table :infoProps="buryInfoProps" :treeProps="treeProps" :searchArgs="childSearchArgs"></event-table>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <draw-image-module :imageInfo="drawImageInfo" @imagePosition="handleDrawPosition"></draw-image-module>
  </div>
</template>

<script>
import BuryInfo from "./buryInfo";
import eventTable from "./eventTable";

export default {
  name: "needItem",
  components: {
    BuryInfo,
    eventTable
  },
  data() {
    return {
      id: null,
      requirementId: null,
      pageDbId: null,
      typeList: [
        {
          name: "添加页面",
          command: 1
        },
        {
          name: "添加区块",
          command: 2
        }
      ],
      type: "",
      pageName: "",
      // 树形导航
      treeProps: {
        data: [],
        action: ["block", "booth", "offline"]
      },
      // 基本信息：form
      buryInfoProps: {
        requirementId: null,
        pageDbId: null,
        actionType: 1,
        operateType: "add",
        url: ""
      },
      // 鼠标绘制图片
      drawImageInfo: {
        id: null,
        visible: false,
        actionType: null,
        imageUrl: null
      },
      // tabs: 埋点列表
      trackName: "",
      tabActive: "first",
      tabName: {
        first: "页面级埋点",
        second: "页面及下级埋点"
      },
      tableSearchArgs: {
        requirementId: null,
        pageDbId: null,
        hasChildren: null,
        trackName: ""
      },
      childSearchArgs: {
        requirementId: null,
        pageDbId: null,
        hasChildren: true,
        trackName: ""
      }
    };
  },
  created() {
    let { id, pageDbId } = this.$route.params;
    this.id = unescape(id);
    if (pageDbId) {
      this.pageDbId = unescape(pageDbId);
    }
    this.handleQueryRequirement();
  },
  mounted() {},
  methods: {
    // 查询需求详情
    async handleQueryRequirement() {
      let data = {
        id: this.id
      };
      let res = await this.$requirementApi.requirementQuery(data);
      if (res) {
        let { requirementId, sdkType } = res.value;
        this.requirementId = requirementId;
        this.tableSearchArgs.requirementId = this.requirementId;
        this.childSearchArgs.requirementId = this.requirementId;
        this.buryInfoProps.requirementId = this.requirementId;
        this.buryInfoProps.sdkType = sdkType;
        this.buryInfoProps.sdkType = 3;
        if (this.pageDbId) {
          this.buryInfoProps.operateType = "edit";
          this.buryInfoProps.pageDbId = this.pageDbId;

          this.tableSearchArgs.pageDbId = this.pageDbId;
          this.childSearchArgs.pageDbId = this.pageDbId;
        }
        this.handleQueryPageNavigate();
      }
    },
    // 查询位置导航
    async handleQueryPageNavigate() {
      let data = {};
      if (this.pageDbId) {
        data.pageId = this.pageDbId;
      } else {
        data.requirementId = this.requirementId;
      }
      if (this.pageName) {
        data.pageName = this.pageName;
      }
      let res = await this.$pageApi.pageNavigate(data);
      if (res) {
        let { pageNavigateList } = res.value;
        this.treeProps.data = this.dataToTree(pageNavigateList);
      }
    },
    // 添加位置选项
    handleCommand(command) {
      this.buryInfoProps = {
        requirementId: this.requirementId,
        pageDbId: this.pageDbId,
        actionType: command,
        operateType: "add",
        url: null
      };
    },
    // 导航搜索：树导航列表
    handleSearchTree() {
      this.handleQueryPageNavigate();
    },
    /*树形导航*/
    // 区块 | 展位 | 下线
    handleSelectedMenu(obj) {
      let { actionType } = obj;
      if (actionType === 2 || actionType === 3) {
        this.buryInfoProps = {
          requirementId: this.requirementId,
          pageDbId: obj.id,
          actionType: actionType,
          operateType: "add",
          url: null
        };
        if (obj.imageUrl) {
          this.drawImageInfo = {
            id: obj.id,
            actionType: actionType,
            visible: true,
            imageUrl: obj.imageUrl
          };
        }
      } else if (actionType === "offline") {
        // 下线
        this.$confirm(`您确定要下线该位置吗？`, "下线位置", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.handlePageStatusOperate(obj.id);
          })
          .catch(() => {});
      }
    },
    // 页面状态更改：下线
    async handlePageStatusOperate(id) {
      let res = await this.$pageApi.pageStatusOperate({
        id,
        operateType: 1
      });
      if (res) {
        this.$message({
          type: "success",
          message: "下线成功"
        });
        this.handleQueryPageNavigate();
      }
    },
    // 点击节点，右侧信息变化
    handleNodeClick(obj) {
      this.buryInfoProps = {
        requirementId: this.requirementId,
        pageDbId: obj.id,
        actionType: obj.actionType,
        operateType: "edit"
      };
      let { actionType } = obj;
      if (actionType === 1) {
        this.tabName.first = "页面级埋点";
        this.tabName.second = "页面及下级埋点";
      } else if (actionType === 2) {
        this.tabName.first = "区块级埋点";
        this.tabName.second = "区块及下级埋点";
      } else if (actionType === 3) {
        this.tabName.first = "展位级埋点";
        this.tabName.second = "展位及下级埋点";
      }
      this.tabActive = "first";
      this.tableSearchArgs.pageDbId = obj.id;
      this.childSearchArgs.pageDbId = obj.id;
    },
    // 页面保存成功，刷新树导航
    handleSavePage(val) {
      if (val) {
        this.handleQueryPageNavigate();
      }
    },
    /*---------*/
    /* 区块、展位绘制 */
    handleDrawPosition(val) {
      let { iconPosition } = val;
      if (iconPosition === null) {
        this.buryInfoProps.url = null;
        this.buryInfoProps.iconPosition = [];
      } else {
        this.buryInfoProps.url = this.drawImageInfo.imageUrl;
        this.buryInfoProps.iconPosition = val.iconPosition;
      }
    },
    /*-----*/
    /*  埋点tabs  */
    handleTabClick(tab) {
      let { name } = tab;
      this.tabActive = name;
    },
    // 埋点列表搜索
    handleSearchEvent() {
      if (this.tabActive === "first") {
        this.tableSearchArgs.trackName = this.trackName;
      } else {
        this.childSearchArgs.trackName = this.trackName;
      }
    },
    // 打开drawer
    handleOpenDrawer() {
      let { hasChildren, trackName } = this.tableSearchArgs;
      this.tableSearchArgs = {
        requirementId: this.requirementId,
        pageDbId: null,
        hasChildren,
        trackName,
        openDrawer: true
      };
    }
  },
  watch: {}
};
</script>

<style lang="scss">
.need-item-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  .tree-content {
    width: 30%;
    padding-right: 10px;

    .el-card {
      height: 100%;
    }

    .tree-menu {
      margin-top: 10px;
    }
  }

  .mess-content {
    width: 70%;

    .el-card__body {
      padding: 10px 20px;
    }

    .list-card {
      margin-top: 10px;
      position: relative;

      .search-input {
        position: absolute;
        width: 200px;
        right: 20px;
        z-index: 2;
      }
    }

    .search {
      font-size: 12px;
      padding-bottom: 8px;

      .btn {
        float: right;
        margin-top: -5px;
      }
    }
  }
}
</style>
